class CommForSave extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            commCode: '',
            clientList: [],
            showPstnInput: false,
            showFaceLisence: false,
            isEditPassword: false,
            cardVendors : {},
        }

        this.cardVendorsTip = ""
    }

    componentDidMount() {
        layui.use(['layer'], () => {
            let params = {}
            if (this.props.commCode) {
                params.commInfo = this.props.commCode;
                params.localServer = this.props.commCode;
            } else {
                params.validCommCode = true;
            }

            params.clientList = true;
            params.cardVendors = true;

            postJson("/comm/getCommInfo.x", params, (data) => {
                let commData = data.data;
                let faceLisence = false;
                if (commData.commInfo && commData.commInfo.permissionFace && commData.commInfo.permissionFace > 0)
                    faceLisence = true;
                this.setState({
                    clientList: commData.clientList,
                    showFaceLisence: faceLisence,
                    cardVendors : commData.cardVendors
                }, () => {
                    if (this.props.commCode) {
                        this.refs.commCode.value = commData.commInfo.commCode;
                        this.refs.commName.value = commData.commInfo.commName;
                        this.refs.custom.value = commData.commInfo.customId;
                        this.refs.city.value = commData.commInfo.cityId;
                        this.refs.commInfo.value = commData.commInfo.commAdds;
                        this.refs.manDev.value = commData.commInfo.manageDevNum;
                        this.refs.gate.value = commData.commInfo.gateDevNum;
                        this.refs.commState.value = commData.commInfo.commState;
                        this.refs.permPstn.value = commData.commInfo.pstnComm;
                        this.refs.gate.value = commData.commInfo.gateDevNum;
                        this.refs.permFace.value = commData.commInfo.permissionFace;
                        this.refs.permLocalServer.checked = commData.localServer;
                        this.refs.permCardPhoto.checked = !!commData.commInfo.permissionCardPhoto;
                        this.refs.permissionFamilyAuth.checked = !!commData.commInfo.permissionFamilyAuth;
                        this.refs.faceDevCount.value = commData.commInfo.faceDevCount;
                        this.refs.commPassword.value = commData.commInfo.commPassword;
                        this.refs.cardVendor.value = commData.commInfo.cardVendor;
                        if (commData.commInfo.pstnComm == this.props.commCode)
                            this.refs.pstn.value = 'this';
                        else if (!commData.commInfo.pstnComm)
                            this.refs.pstn.value = '';
                        else
                            this.refs.pstn.value = 'other';
                    } else {
                        this.refs.commCode.value = commData.validCommCode;
                    }
                });
            });

        });
    }

    pstnChange(data) {
        if (!this.refs.commCode.value) {
            layui.layer.alert("小区编号不能为空");
            return;
        }

        if (data == 'this') {
            this.refs.permPstn.value = this.refs.commCode.value;
            this.setState({showPstnInput: false});
        }
        else if (data == 'other')
            this.setState({showPstnInput: true});
        else {
            this.refs.permPstn.value = "";
            this.setState({showPstnInput: false});
        }
    }


    save() {
        layui.layer.confirm("确定要提交新的小区信息么?", (index) => {
            if (this.props.commCode && this.refs.commPassword && isNaN(this.refs.commPassword.value)) {
                layui.layer.alert("小区密码必须为数字！");
                return;
            }

            let params = {
                commCode: this.refs.commCode.value,
                commName: this.refs.commName.value,
                city: this.refs.city.name,
                cityId: this.refs.city.value,
                commAdds: this.refs.commInfo.value,
                customId: this.refs.custom.value,
                manageDevNum: this.refs.manDev.value,
                gateDevNum: this.refs.gate.value,
                commState: this.refs.commState.value,
                pstnComm: this.refs.permPstn.value,
                permissionCardPhoto: this.refs.permCardPhoto.checked ? 1 : 0,
                permissionFamilyAuth: this.refs.permissionFamilyAuth.checked ? 1 : 0,
                permissionFace: this.refs.permFace.value ? this.refs.permFace.value : 0,
                faceDevCount: this.refs.faceDevCount.value ? this.refs.faceDevCount.value : 0,
                commPassword: this.refs.commPassword ? this.refs.commPassword.value : '',
                cardVendor : this.refs.cardVendor.value
            };

            if (this.refs.permLocalServer.checked)
                params.localServer = true;

            postJson("/comm/save.x", params, () => {
                if (this.props.commCode) {
                    layui.layer.msg("修改成功");
                } else {
                    layui.layer.confirm("创建小区成功!是否为该小区创建楼栋单元?", {icon: 1}, () => {
                        window.location.href = document.location.href = '/AreaCtrl/genArea.x?commCode=' + params.commCode;
                    })
                }
                layui.layer.close(index);
            })
        })
    }

    editClick(isEditPassword) {
        this.setState({
            isEditPassword: isEditPassword
        })
    }

    getCardVendors(){
        let ret = [];
        for(let key in this.state.cardVendors){
            ret.push(<option value={key}>{this.state.cardVendors[key]}</option>)
        }
        return ret;
    }

    cancel() {
        history.back(-1);
    }

    render() {
        let pstnStyle = this.state.showPstnInput ? {} : {display: "none"};
        return (

            <Frame header={this.props.commCode ? '修改小区信息' : '新建小区'}>
                <Form type="pane">
                    <Item>
                        <Label>小区编号</Label>
                        <Input ref="commCode" lay-verify="required"/>
                    </Item>
                    <Item>
                        <Label>小区名称</Label>
                        <Input ref="commName" lay-verify="required"/>
                    </Item>
                    <Item>
                        <Label>城市选择</Label>
                        <LayuiCitySelect lay-verify="required" ref="city"></LayuiCitySelect>
                    </Item>
                    <Item>
                        <Label>小区状态</Label>
                        <Select ref="commState" lay-verify="required">
                            <option value="">请选择小区状态</option>
                            <option value="test">测试状态</option>
                            <option value="deploy">部署状态</option>
                            <option value="operate">运营状态</option>
                        </Select>
                        {this.props.commCode ? <div>
                            <Label>小区密码</Label>
                            {this.state.isEditPassword ?
                                <ButtonInput ref="commPassword"
                                             onClick={() => this.editClick(false)}>确定</ButtonInput>
                                :
                                <ButtonInput readonly="readonly" ref="commPassword"
                                             onClick={() => this.editClick(true)}>编辑</ButtonInput>
                            } </div> : ''
                        }
                    </Item>
                    <Item>
                        <Label>信息详情</Label>
                        <Textarea rows="3" cols="40" lay-verify="required" ref="commInfo"></Textarea>
                    </Item>
                    <Item>
                        <Label>SDK客户ID</Label>
                        <Select onChange={() => this.clientSelect()} ref="custom" lay-verify="required">
                            {
                                this.state.clientList.map((client) => {
                                    return <option value={client.customId}>{client.customName}</option>
                                })
                            }
                        </Select>

                        <Label>IC卡类型&nbsp;<Tips>小区选择了对应的IC卡型号就必须得安装对应的硬件设备</Tips></Label>
                        <Select ref="cardVendor">
                            {
                                this.getCardVendors()
                            }
                        </Select>
                    </Item>
                    <Item>
                        <Label>管理机数量</Label>
                        <Input defaultValue={0} ref="manDev"/>
                        <Label>围墙机数量</Label>
                        <Input defaultValue={0} ref="gate"/>
                    </Item>
                    <Item>
                        <Label>语音网关</Label>
                        <Select onChange={(data) => this.pstnChange(data)} ref="pstn">
                            <option>无</option>
                            <option value="this">本小区</option>
                            <option value="other">其他</option>
                        </Select>
                        <Input ref="permPstn" style={pstnStyle}/>
                        <Label>人脸识别</Label>
                        <Select ref="permFace" onChange={(value) => {
                            this.setState({showFaceLisence: !!value});
                        }}>
                            <option value="">未开启</option>
                            <option value="1">物业录入</option>
                            <option value="2">手机录入</option>
                        </Select>
                        <Input ref="faceDevCount" placeHolder="人脸License数量"
                               style={this.state.showFaceLisence ? {} : {display: "none"}}/>
                    </Item>
                    <Item pane="true">
                        <Label>其他权限</Label>
                        <Checkbox title="局域网服务器" ref="permLocalServer" width="xs"/>
                        <Checkbox title="刷卡照片上传" ref="permCardPhoto" width="xs"/>
                        <Checkbox title="家属授权关闭" ref="permissionFamilyAuth" width="xs"/>
                    </Item>
                    <Item>
                        <Button className="layui-btn layui-btn" onClick={() => this.save()}
                                lay-submit="true">提交</Button>
                        <Button type="button" className="layui-btn layui-btn-normal"
                                onClick={() => this.cancel()}>取消</Button>
                    </Item>
                </Form>
            </Frame>
        )
    }
}

ReactDOM.render(<CommForSave commCode={getUrlParam("commCode")}/>, document.getElementById("forSave"));